import styled from 'styled-components'
import * as vars from '../style/variables'

export const HomeWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 20px;
  .top {
    border: 1px solid #ddd;
    .title {
      color: ${props => props.theme.color};
      font-size: ${props => props.theme.fontSize};
      .desc {
        font-size: ${vars.fontSize};
        color: ${vars.secondColor}
      }
    }
  }
  .bottom {
    border: 1px solid #ddd;
    .title {
      color: ${props => props.theme.color};
      font-size: ${props => props.theme.fontSize};
    }
    .desc {
      font-size: ${vars.fontSize}px;
      color: ${vars.primaryColor};
    }
  }
`